import * as api from './api';
import { UserPageQuery, CrudOptions, CreateCrudOptionsProps, CreateCrudOptionsRet, dict } from '@fast-crud/fast-crud';
import { commonCrudConfig } from "/@/utils/commonCrud";
import { ElMessage, ElDrawer, ElButton  } from 'element-plus';
import { inject, nextTick, ref } from 'vue';
export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
    const pageRequest = async (query: UserPageQuery) => {
        return await api.GetList(query);
    };
    // const emit = defineEmits<{
    //     (e: 'update-row', tradingPair: string): void;
    // }>();
    return {
        crudOptions: {
            emits: ['update-row'],
            request: { 
                pageRequest,
            },
            actionbar: {
                buttons: { 
                    add: {
                        show: false,
                    },
                    upload: {
                        text: '上传', 
                        type: 'primary',
                        click: () => {
                            // 在这里实现上传功能的逻辑
                            // console.log('上传功能被点击');
                        },
                    },
                    merge: {
                        text: '合并',
                        type: 'warning',
                        click: () => {
                            // 在这里实现合并功能的逻辑
                            // console.log('合并功能被点击');
                        },
                    },
                },
            },
            rowHandle: {
                fixed: 'right',
                width: 150, 
                buttons: {
                    view: {
                        type: 'text',
                        text: '查看', 
                        style: { color: '#909399' },
                    },   
                    operation: {
                        type: 'text',
                        text: '删除',
                        style: { color: '#FF4444' },
                        // click: (ctx: any) => {  
                        //     const { row } = ctx;
                        //     context!.subTradingRef.value.openDrawer(row.trading_pair);
                        // },
                    }, 
                    remove: {
                        type: 'text',
                        text: '更新',
                        style: { color: '#67C23A' },
                        click: (ctx: any) => {  
                            const { row } = ctx;
                            context!.subTradingRef.value.openDrawer(row.trading_pair);
                        },
                    },
                    edit: {
                        show: false,
                    },
                },
            },
            columns: {
                _index: {
                    title: '序号',
                    form: { show: false },
                    column: {
                        align: 'center',
                        width: '70px',
                        columnSetDisabled: true,
                        formatter: (context) => {
                            let index = context.index ?? 1;
                            let pagination = crudExpose!.crudBinding.value.pagination;
                            return ((pagination!.currentPage ?? 1) - 1) * pagination!.pageSize + index + 1;
                        },
                    },
                },
                exchange: {
                    title: '交易所',
                    type: 'dict-select',
                    column: {
                        minWidth: 60,
                        formatter: (context) => {
                            // 返回带有样式的 HTML 元素
                            return <el-tag type="success" plain>币安</el-tag>;
                        },
                    },
                    form: {
                        disabled: true,
                    },
                    dict: dict({
                        data: [
                            { value: 'binance', label: '币安' },
                        ],
                    }),
                    defaultValue: 'binance',
                },
                trading_pair: {
                    title: '交易对',
                    type: 'input',
                    search: { show: true },
                    column: {
                        minWidth: 120,
                    },
                    form: {
						rules: [{ required: true, message: '请输入交易对名称' }],
						component: {
							placeholder: '请输入',
						},
					},
                },
                data_beings: {
                    title: '数据开始',
                    type: 'datetime',
                    column: {
                        minWidth: 150,
                    },
                    form: {
                        disabled: true,
                    },
                },
                data_end: {
                    title: '数据结束',
                    type: 'datetime',
                    column: {
                        minWidth: 150,
                    },
                    form: {
                        disabled: true,
                    },
                },
                cycle: {
                    title: '周期',
                    type: 'number',
                    column: {
                        minWidth: 50,
                    },
                    form: {
                        disabled: true,
                    },
                    defaultValue: 1,
                },
                is_add_data: {
                    title: '已添加',
                    type: 'dict-select',
                    column: {
                        minWidth: 90,
                    },
                    search: {
                        show: true
                    },
                    form: {
                        disabled: true,
                    },
                    dict: dict({
                        data: [
                            { value: true, label: '是' },
                            { value: false, label: '否' },
                        ],
                    }),
                    defaultValue: true,
                },
                is_trade: {
                    title: '可交易',
                    type: 'dict-select',
                    column: {
                        minWidth: 90,
                        formatter: (context) => {
                            const value = context.row.is_trade;
                            if (value) {
                                return <el-tag type="primary" plain>可交易</el-tag>;
                            } else {
                                return <el-tag>不可交易</el-tag>;
                            }
                        },
                    },
                    search: {
                        show: true
                    },
                    form: {
                        disabled: true,
                    },
                    dict: dict({
                        data: [
                            { value: true, label: '可交易' },
                            { value: false, label: '不可交易' },
                        ],
                    }),
                },
                status: {
                    title: '状态',
                    type: 'number',
                    column: {
                        minWidth: 50,
                    },
                    form: {
                        disabled: true,
                    },
                    defaultValue: 0,
                },
            },
        },
    };
};